<!-- Created by henian.xu on 2021/7/9. -->

<template>
  <Page>
    <Container class="index-page">
      <div class="banner">
        <img src="@/assets/images/banner-bg.jpg" alt="" />
      </div>

      <div v-if="shopList && shopList.length" class="list-data">
        <ShopItem
          v-for="item in shopList"
          :key="item.name"
          :dataset="item"
        ></ShopItem>
      </div>

      <div v-if="shopList && !shopList.length" class="no-data">
        <img src="@/assets/images/no-data.png" alt="no-data" />
      </div>
      <div v-else-if="!shopList" class="pa-ab ta-c">查询中...</div>

      <div v-if="!showMore" class="pa-a ta-c">
        <XButton
          class="w-15em"
          theme="main"
          size="super"
          lock-text
          radius="all"
          @click="
            () => {
              onShow();
            }
          "
          >查看最近20家门店</XButton
        >
      </div>
    </Container>
  </Page>
</template>

<script>
import ShopItem from 'pages/_shopItem';
export default {
  name: 'IndexPage',
  components: { ShopItem },
  data() {
    return {
      listData: null,
      showMore: false,
    };
  },
  computed: {
    shopList() {
      const { showMore, listData } = this;
      if (!listData) return null;
      if (showMore) return listData;
      return [...(listData || [])].splice(0, 1);
    },
  },
  methods: {
    onShow() {
      this.showMore = true;
      this.onQuery();
    },
    async onQuery() {
      try {
        const { latitude, longitude } = await this.$wxSDK.getLocation('gcj02');
        const { data } = await this.$http.get(
          '/api/dwll_q2_active/getShopList',
          {
            lng: longitude,
            lat: latitude,
          },
        );
        console.log(data);
        this.listData = data.store_list || [];
      } catch (e) {
        this.listData = [];
        this.$messageBox.alert(e.message, '温馨提示');
      }
    },
  },
  created() {
    this.onQuery();
  },
};
</script>

<style lang="scss">
.index-page {
  .banner {
    > img {
      width: 100%;
      height: auto;
    }
  }

  .no-data {
    width: 173px;
    height: 257px;
    margin: $margin-big * 4 auto;
    > img {
      width: 100%;
      height: 100%;
    }
  }

  .list-data {
    padding: $padding-big $padding-big * 2;
  }
}
</style>
